<template>
  <z-modal
    title="未关联岗位"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="table-page-search-wrapper">
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="岗位名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input placeholder="请输入岗位名称" v-model="queryParam.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="职系" :label-col="labelCol" :wrapper-col="wrapperCol">
              <ZAsyncSelect
                class="w-full"
                mode="multiple"
                v-model="queryParam['postType@IN']"
                url="/posttype/page"
                placeholder="请选择"
                :optionKey="{label:'name',value:'code'}"
              />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery()" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset()" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <vxe-grid
      id="RoleWithoutPostModal"
      keep-source
      ref="vxeTable"
      :height="null"
      v-bind="gridOptions"
      :toolbar-config="false"
      v-on="listeners"
      :row-config="{keyField:'id'}"
    >
  </vxe-grid>
  </z-modal>
</template>

<script>
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import ModalMixins from '@/mixins/ModalMixins'
import ZAsyncSelect from '@/components/dict/ZAsyncSelect'
import { roleAddActors } from '@/services/system'
export default {
  name: 'RoleWithoutPostModal',
  mixins: [VxeTableListMixin, ModalMixins],
  components: { ZAsyncSelect },
  props: {
    roleId: {
      type: String
    }
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      columns: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        { title: '岗位名称', field: 'name' },
        { title: '职系', field: 'postType', formatter: 'dictText' }
      ],
      proxyConfig: {
        autoLoad: false
      },
      url: {
        list: ''
      }
    }
  },
  methods: {
    add() {
      this.visible = true
      this.url.list = `/post/role/without/${this.roleId}`
      this.loadData()
    },
    handleOk() {
      if (this.selectionRows.length) {
        this.confirmLoading = true
        roleAddActors(this.roleId, this.selectedRowKeys).then(res => {
          if (res.success) {
            this.$emit('ok')
            this.visible = false
          }
        }).finally(() => {
          this.confirmLoading = false
        })
      } else {
        this.$message.warning('请选择关联的岗位')
      }
    }
  }
}
</script>
